<template>
  <Container>
    <template v-slot:content>
      <TapList :tapList="areaList" :tapProps="{
        label: 'areaName',
        name: 'areaId'
      }" @handleClickTabs="handleClickTabs">
        <div class="facilityContent">
          <EnumBtn @enumClick="enumClick"></EnumBtn>
          <div class="energy">
            <div class="totalEnergy">
              <div class="meter">
                <img src="@/assets/icon/shuibiao.png" alt="">
                <div class="point" :class="{ 'blinking-dot': !!equipmentValue }"></div>
                <div class="meterNum">{{ equipmentValue || '0' }}</div>
              </div>
              <div class="energyValue">
                <div class="value">{{ equipmentValue || '0' }} <span class="unitName">kwh</span> </div>
                <div class="label">累计用电量</div>
              </div>
            </div>
            <div class="showData">
              <div class="chart">
                <LineChart :dataList="lineDataList" :seriesName="lineSeriesName"></LineChart>
              </div>
              <div class="table">
                <div class="tableTitle">能耗用量</div>
                <div class="tableContent">
                  <TableData :tableItemNum="4" :tableThead="tableThead" :dataList="dataList" :loading="loading"
                    :page="page" :size="size" :total="total" @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange">
                    <template v-slot:equipmentValue="{ row }">
                      {{ row.equipmentValue }}{{ row.energyUnit }}
                    </template>
                    <template v-slot:consumption="{ row }">
                      {{ row.consumption || 0 }}{{ row.energyUnit }}
                    </template>
                  </TableData>
                </div>
              </div>
            </div>
          </div>
        </div>
      </TapList>
    </template>
  </Container>
</template>

<script>
import Container from "@/components/Container"
import LineChart from "@/components/Echart/line.vue"
import TapList from "@/components/TapList"
import areaApi from '@/api/area'
import manualMeterApi from '@/api/manualMeter'
export default {
  name: 'ManualMeterReadingData',
  components: {
    TapList,
    LineChart,
    Container
  },
  data() {
    return {
      areaList: [],
      lineDataList: [],
      areaId: '',
      energyId: '',
      energyUnit: '',
      size: 10,
      page: 1,
      total: 10,
      dataList: [],
      equipmentValue: 0,
      areaId: '',
      lineSeriesName: '',
      tableThead: [
        { label: '区域名称', prop: 'areaName' },
        { label: '能源类型', prop: 'energyName' },
        { label: '累计用量', slotName: 'equipmentValue' },
        { label: '距上条用量', slotName: 'consumption' },
        { label: '录入人', prop: 'recordUser' },
        { label: '录入时间', prop: 'recordTime' }
      ],
    }
  },
  mounted() {
    this.queryAreaList();
  },
  methods: {
    initData() {
      this.page = 1;
      this.size = 4;
      this.searchFormData = {
        areaId: this.areaId,
        energyId: this.energyId,
        organizationNo: sessionStorage.organizationNo
      }
      this.queryPageByCondition();
      this.queryByCondition();
    },
    async queryAreaList() {
      let res = await areaApi.queryByCondition({});
      this.areaList = res.data || [];
      this.areaId = this.areaList[0]?.areaId;
    },
    async queryByCondition() {
      let res = await manualMeterApi.queryByCondition(this.searchFormData || {});
      let dataList = res.data || [];
      let length = dataList.length;
      dataList.sort((a, b) => new Date(a.recordTime) - new Date(b.recordTime));
      this.equipmentValue = length ? dataList[dataList.length - 1].equipmentValue : 0;
      this.lineDataList = dataList.map(e => {
        return {
          time: e.recordTime,
          value: e.consumption
        }
      })
    },
    //查询表单数据
    queryPageByCondition() {
      if (this.areaId && this.energyId) {
        this.loading = true;
        manualMeterApi.queryPageByCondition({
          page: this.page,
          size: this.size,
          sortStr: "recordTime",
          order: 'DESC',  //排序方式 ASC DESC 默认ASC
          entity: {
            ...this.searchFormData,
            organizationNo: sessionStorage.organizationNo
          }
        }).then(res => {
          if (res.code == 1) {
            let { content, totalElements, totalPages } = res.data || {}
            this.dataList = content || [];
            this.total = totalElements || 10;
          } else {
            this.dataList = [];
          }
          this.loading = false;
        }).catch(err => {
          this.loading = false;
        })
      } else {
        this.dataList = []
      }
    },
    enumClick(e) {
      this.lineSeriesName = `能耗(${e.energyUnit})`
      this.energyId = e.energyId;
      this.initData();
    },
    handleClickTabs(e) {
      if (e && e.areaId) {
        this.areaId = e.areaId;
        this.initData();
      }
    },
    handleCurrentChange(page) {
      this.page = page;
      this.queryPageByCondition();
    },
    handleSizeChange(size) {
      this.size = size;
      this.queryPageByCondition();
    },
  }
}
</script>

<style lang="scss" scoped>
.facilityContent {
  width: 100%;
  height: 100%;

  .energy {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;

    .totalEnergy {
      width: 20%;
      height: 100%;
      padding: 30px;
      background-color: #ffffff;
      background: linear-gradient(323deg, rgba(97, 118, 208, 0.24) 0%, rgba(147, 201, 255, 0.24) 100%);

      .meter {
        width: 100%;
        height: calc(100% - 180px);
        margin: 0 auto;
        margin-bottom: 20px;
        position: relative;

        .point {
          position: absolute;
          width: 10%;
          height: 8%;
          top: 59%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
        }

        /* 定义闪烁的原点 */
        .blinking-dot {
          background: linear-gradient(323deg, #6176D0 0%, #93C9FF 100%);
          border-radius: 50%;
          animation: blink 1s infinite;
        }

        /* 定义闪烁动画 */
        @keyframes blink {

          0%,
          100% {
            opacity: 1;
          }

          50% {
            opacity: 0;
          }
        }

        img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .meterNum {
          position: relative;
          top: 28%;
          left: 50%;
          transform: translate(-50%, 0%);
          width: 55%;
          height: 14%;
          padding: 0 5px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          color: #ffffff;
          font-weight: bold;
        }
      }

      .energyValue {
        width: 100%;
        margin: 0 auto;
        background: linear-gradient(323deg, #6176D0 0%, #93C9FF 100%);
        border-radius: 5px;
        color: #ffffff;
        text-align: center;
        padding: 30px 0;

        .value {
          font-size: 33px;
          font-weight: bold;
          line-height: 40px;

          .unitName {
            font-weight: 500;
            font-size: 20px;
          }
        }

        .label {
          font-size: 16px;
          line-height: 20px;
        }
      }
    }

    .showData {
      width: calc(80% - 12px);
      height: 100%;
      padding: 20px;
      background-color: #ffffff;

      .chart {
        width: 100%;
        height: 40%;
        background: #F8F8F8;
      }

      .table {
        width: 100%;
        height: 60%;

        .tableTitle {
          width: 100%;
          line-height: 50px;
          font-size: 18px;
        }

        .tableContent {
          width: 100%;
          height: calc(100% - 50px);
        }
      }
    }
  }
}
</style>
